<template>
  <u-popup
    mode="bottom"
    v-model="showPopup"
    :z-index="999"
    border-radius="24"
    safe-area-inset-bottom
    :maskCloseAble="false"
  >
    <view class="popBox">
      <view class="popup-title">
        <view class="let">{{ $t("newAdmin.goods.SetPriceInventory") }}</view>

        <i class="iconfont icon-close" @click="showPopup = false"></i>
      </view>

      <view class="inp">
        <view class="inpTitle">{{ $t("list.price") }}</view>
        <view class="icon">¥</view>
        <view class="input">
          <u-input
            v-model="price"
            type="digit"
            clearable
            :placeholder="$t('newAdmin.warning.PleaseFillIn')"
            @blur="getPrice(1, 'price')"
            :style="[inputStyle]"
          ></u-input>
        </view>
      </view>
      <view class="inp">
        <view class="inpTitle">{{ $t("newAdmin.goods.num") }}</view>
        <view class="input">
          <u-input
            v-model="num"
            type="number"
            clearable
            :placeholder="$t('newAdmin.warning.PleaseFillIn')"
            :style="[inputStyle]"
            @blur="getPrice(0, 'num')"
          ></u-input>
        </view>
      </view>
      <view class="inp">
        <view class="inpTitle">{{ $t("admin.article") }}</view>
        <view class="input">
          <u-input
            v-model="no"
            :style="[inputStyle]"
            type="text"
            :placeholder="$t('newAdmin.warning.PleaseFillIn')"
            clearable
          ></u-input>
        </view>
      </view>

      <view class="popBtn">
        <u-button
          @click="submit"
          :disabled="disabled"
          :customStyle="{
            background: '#F0250E',
            color: '#fff',
            borderRadius: '32px',
          }"
          :hoverStartTime="hoverStartTime"
          >{{ $t("newAdmin.filter.submit") }}</u-button
        >
      </view>
    </view>
  </u-popup>
</template>

<script>
export default {
  data() {
    return {
      showPopup: false,
      disabled: false,
      hoverStartTime: 1000000,
      no: "",
      price: "0",
      num: "0",
      inputStyle: {
        height: "100%",
      },
    };
  },

  methods: {
    submit() {
      let { no, price, num } = this;

      this.disabled = true;
      this.$emit("changeValue", {
        no,
        price,
        num,
      });
    },

    getPrice(status, el) {
      let value = this[el];
      if (status === 1) {
        this[el] = parseFloat(value).toFixed(2);
      } else {
        this[el] = parseInt(value);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.popBox {
  display: flex;
  flex-direction: column;
  padding: 0 0;
}

.popup-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20rpx;
  padding: 26rpx 36rpx;

  .let {
    font-size: 32rpx;
    color: #262626;
    font-weight: bold;
  }

  .iconfont {
    color: #262626;
  }
}

.popBtn {
  margin-top: 20rpx;
  padding: 10rpx 30rpx;
  border-top: 1px solid #f2f2f2;
}

.inp {
  position: relative;
  /* padding: 30rpx 36rpx 10rpx; */
  display: flex;
  align-items: center;
  margin: 0 36rpx 20rpx;
  padding: 0 20rpx;
  background: #f8f8f8;
  border-radius: 20rpx;

  .inpTitle {
    width: 140rpx;
  }

  .icon {
    margin-right: 10rpx;
    color: #8c8c8c;
  }

  .input {
    flex: 1;
    overflow: hidden;
    
    // #ifdef  H5
    height: 80rpx;
    // #endif
    /*
    // height: 80rpx;
     //line-height: 80rpx;
      */
  }
}

.number {
  position: absolute;
  right: 60rpx;
  bottom: 20rpx;
  font-size: 28rpx;
  color: #8c8c8c;
}

::v-deep {
  .u-input__input {
    height: 100%;
  }
}
</style>
